<div class="card mb-3 mt-1">
	<div class="card-header text-white bg-dark">
		<h5 class="card-title">Search {{object_name}} by Tags :</h5>
	</div>
		<div class="card-body">

			{%if object_type=='item' or object_type=='message'%}
				<div class="row mb-3">
					<div class="col-md-6">
						<div class="input-group" id="date-range-from">
							<div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt" aria-hidden="true"></i></span></div>
							<input class="form-control" id="date-range-from-input" placeholder="yyyy-mm-dd" value="{{ date_from[0:4] }}-{{ date_from[4:6] }}-{{ date_from[6:8] }}" name="date_from" autocomplete="off">
						</div>
					</div>
					<div class="col-md-6">
						<div class="input-group" id="date-range-to">
							<div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt" aria-hidden="true"></i></span></div>
							<input class="form-control" id="date-range-to-input" placeholder="yyyy-mm-dd" value="{{ date_to[0:4] }}-{{ date_to[4:6] }}-{{ date_to[6:8] }}" name="date_to" autocomplete="off">
						</div>
					</div>
				</div>
			{%endif%}

			<div class="input-group mb-3">
			  <div class="input-group-prepend">
					<button class="btn btn-outline-danger" type="button" id="button-clear-tags" style="z-index: 1;" onclick="emptyTags()">
						<i class="fas fa-eraser"></i>
					</button>
			  </div>
				<input id="ltags" name="ltags" type="text" class="form-control" aria-describedby="button-clear-tags" autocomplete="off">
			</div>

			<button class="btn btn-primary" type="button" id="button-search-tags" onclick="searchTags()">
				<i class="fas fa-search"></i> Search {{object_name}}
			</button>

			</div>
	</div>


<link href="{{ url_for('static', filename='css/tags.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ url_for('static', filename='js/tags.js') }}"></script>
<script>
  var ltags;
  $.getJSON("{{ url_for('tags_ui.get_all_obj_tags') }}?object_type={{ object_type }}",
    function(data) {
      ltags = $('#ltags').tagSuggest({
        data: data,
				value: [{%if "current_tags"%}{% for tag in current_tags %}'{{tag|safe}}',{%endfor%}{%endif%}],
        sortOrder: 'name',
        maxDropHeight: 200,
        name: 'ltags'
      });
  });

  function searchTags() {
  	var data = ltags.getValue();
		var parameter = "?ltags=" + data + "&object_type={{ object_type }}{%if page%}&page={{ page }}{%endif%}";
		{%if object_type=='item' or object_type=='message'%}
			var date_from = $('#date-range-from-input').val();
	  	var date_to =$('#date-range-to-input').val();
			parameter = parameter + "&date_from=" + date_from + "&date_to=" + date_to;
		{%endif%}
  	window.location.replace("{{ url_for('tags_ui.get_obj_by_tags') }}" + parameter);
  }
  function emptyTags() {
  	ltags.clear();
  }


{%if object_type=='item' or object_type=='message'%}
	$('#date-range-from').dateRangePicker({
				separator : ' to ',
				getValue: function(){
						if ($('#date-range-from-input').val() && $('#date-range-to-input').val() )
								return $('#date-range-from-input').val() + ' to ' + $('#date-range-to-input').val();
						else
								return '';
						},
						setValue: function(s,s1,s2){
								$('#date-range-from-input').val(s1);
								$('#date-range-to-input').val(s2);
						}
	});
	$('#date-range-to').dateRangePicker({
			separator : ' to ',
			getValue: function(){
					if ($('#date-range-from-input').val() && $('#date-range-to-input').val() )
							return $('#date-range-from-input').val() + ' to ' + $('#date-range-to-input').val();
					else
							return '';
			},
			setValue: function(s,s1,s2){
					$('#date-range-from-input').val(s1);
					$('#date-range-to-input').val(s2);
			}
	});

{%endif%}

</script>
